<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<title></title>

<style>
    body{
    	    margin: 0;
	    padding: 0;
	    width: 100%;
	    height: 100%;	  
	    background: url(img/3.jpg); 
	    background-repeat: no-repeat; 
    }
    .head0{
    	    position: fixed;
    	    width: 100%;
    	    height: 18px;
    	    background-color: #66bb6a ;
    	    z-index: 999;
    	    top: 0;
    }
	.head1{
		position:fixed;
		width: 100%;
		height: 68px;
		top: 18px;
		background-color: #81c784;
		z-index: 999;
		color: white;
		font-weight: bold;
		font-size: 26px;
		text-align: center;
		line-height: 68px;
	}
	.div0{
		position:relative;
		top: 100px;
		width: 90%;
		left: 5%;
		
	}
	.div1{
		position: relative;
		height: 160px;
		margin-top:16px;
		padding-left: 10%;
		border: none;
		background-color:#e0f7fa;
		border-radius: 3px;
		
	}
	
	.div2{
		position: absolute;
		background-color:#EAFAF9;
		box-shadow:2px 2px 15px -1px #D1D1D1;
		border-radius: 2px;
		width: 55%;
		height: 85%;
		top: 6%;
		right: 6%;
		text-align: center;
	}
	.span{
		position: absolute;
		top: 40px;
	}
	.img0{
		position: relative;
		width: 140px;
		height: 140px;
		margin-top: 2%;
		border-radius: 50%;
	}
	.p0{
		position: fixed;
		margin-left:40%;
		margin-top: -55px;
		color: #a5d6a7;
		font-size:20px;
		font-weight: bold;
		position: absolute;
		top: 50%;
		left: -8px;
	}
	.img2{
            width: 40px;
            height: 40px;

    }
    .button1:visited{
    	       td.style.font-size:20px;
    }
    .button1{
            background: transparent;
            border: none;
            height: 45px;
    }
    .td1{
         	position: relative;
         	width: 50%;
         	height: 100%;
         	text-align: center;
         	background: transparent;
         	color: #FF6699;
         	top: 20px;
         	
    }
    .td2{
    	        position: relative;
    	        width: 50%;
    	        height: 30%;
    	        text-align: center;
    	        top: -10px;
    }
    
	
</style>
</head>
<body ng-controller='appController'>

<div class="head0"></div>	
<div class="head1">彩色满意度调查</div>


<div class="div0">
<ul class="collapsible popout" data-collapsible="accordion" >
    <li ng-repeat='row in data'>
      <div class="collapsible-header div1" >
      	  <img class="img0" ng-src="{{row.path}}">
      	  
      	  <div class="div2">
      	  	  <p class="p0">
      	  	     {{row.name}}
      	      </p>
      	      <table>
      	      	<tr>
      	      		<td class="td1">
      	      			{{row.likes}}
      	      		</td>
      	      		<td class="td1">
      	      			{{row.unlikes}}
      	      		</td>
      	      	</tr>
      	      	<tr>
      	      		<td class="td2">
      	      			<button class="button1" ng-click="getLikes($index)"><img class="img2" src="img/like.png" ></button>
      	      		</td>
      	      		<td class="td2">
      	      			<button class="button1" ng-click="getUnlikes()"><img class="img2" src="img/unlike.png"></button>
      	      		</td>
      	      	</tr>
      	      </table>
      	  </div>
      </div>
    </li>
</ul>

          
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
